<template>
	<view class="content">
		<view class="swiper">
			<u-swiper mode="rect" height="750" :list="list"></u-swiper>
		</view>
		<view class="productInfo pd20">
			<view class="productTitle">{{productInfo.pg_name}}</view>
			<view class="pointPrice"><text class="price">{{productInfo.pg_points}}</text>积分</view>
		</view>

		<view class="details">
			<view class="descTitle">
				商品描述
			</view>
			<u-parse :html="productInfo.pg_body"></u-parse>
		</view>
		<!-- 按钮 -->
		<view class="btns">
			<!-- 积分兑换 -->
			<u-button shape="circle" :custom-style="customStyle" :hair-line="false" @click="showpopup = true">立即兑换</u-button>
		</view>
		<!-- 登录弹框提示 -->
		<u-modal v-model="isLogin" :content="content" @confirm="goLogin"></u-modal>
		<u-popup v-model="showpopup" mode="bottom" border-radius="10">
			<view>
				<!-- 商品 -->
				<view class="productbuy">
					<view class="buyImg">
						<image :src="list[0]" mode=""></image>
					</view>
					<view class="buyinfo">
						<view class="buyname">{{productInfo.pg_name}}</view>
						<view class="buypoint">{{points}}积分</view>
					</view>
				</view>
				<!-- 地址 -->
				<view class="addressView">
					<view class="addressData" v-if="addressInfo" @click="onShowAddress()">
						<image class="addressIcon" src="/static/location2.png"></image>
						<view class="address">
							<text>{{addressInfo.contact_person}}({{addressInfo.contact_phone}})</text>
							<text class="addressText">{{addressInfo.address}}</text>
						</view>
						<image class="nextIcon" src="/static/next.png" mode="widthFix"></image>
					</view>
					<view class="addressAdd" v-else @click="onNewAddress()">+点击添加地址</view>
				</view>
				<view class="number-box">
					<u-number-box v-model="number" @change="valChange"></u-number-box>
				</view>
				<!-- btns-->
				<view class="btnbox">
					<u-button shape="circle" type="success" @click="submitOrder">立即兑换</u-button>
				</view>
			</view>
		</u-popup>
		<addressPopup ref="address" @select="onSelected" @edit="onEditAddress" @add="onNewAddress"></addressPopup>
	</view>
</template>

<script>
	import {getPointDetail} from '@/common/pointStore.js'
	import addressPopup from "@/components/address-popup.vue"
	import {
		getDefaultAddresses,
		getAddressesList,
		submitOrder
	} from '../../api/user.js'
import { toast } from '../../utils/common.js'
	export default {
		components: {
			addressPopup
		},
		data() {
			return {
				customStyle:{
					backgroundColor:'#fc562f',
					color:'#fff',
				},
				countDownStyle:{
					showBorder:true,
					borderColor:'#fc562f'
				},
				addressPopup: false,
				addressId: '', //收货地址id
				addressInfo: '',
				showpopup:false,
				timestamp:86400,
				productInfo:{},
				shopInfo:{},
				list: [],
				shopLogo:'',
				endTime:0,
				startTime:0,
				seckillType:1,//1开始的  2未开始
				sectillDesc:'',
				isDisabled:false,
				content:'当前用户未登录，是否登录',
				isLogin:false,
				number:1,
				points:0,
			}
		},
		watch:{
			mode:{
				handler(val,oldval){
					this.mode = val
				},
				deep:true
			},
			productInfo:{
				handler(val,old){
					this.productInfo = val
				},
				deep:true
			},
			shopInfo:{
				handler(val,old){
					this.shopInfo = val
				},
				deep:true
			}
		},
		onLoad(options) {
			this.mode = options.mode;
			
			this.getShopDetails(options.id);
			this.initAddress();
			this.initDefaultAddress();
		},
		methods:{
			// 提交订单
			submitOrder(){
				let that = this
				let obj = {
					pg_goodsid:that.productInfo.pg_id,
					pg_allpoint:that.points,
					pg_shippingaddress: that.addressId,
					pg_number: that.number,
					pg_orderamount:parseFloat(that.productInfo.pg_price) * that.number,
					pg_shippingcharge:0,
					pg_shippingfee:0,
					pg_ordermessage:''
				}
				submitOrder(obj).then(res=>{
					toast('兑换成功')
					that.showpopup = false
					// that.$refs.address.close();
				})
			},
			valChange(e){
				this.points =  this.productInfo.pg_points * e.value;
				this.number = e.value;
			},
			getShopDetails(id){
				let that =this
				// 积分
				getPointDetail(id).then(res=>{
					console.log(888888,res);
					that.productInfo = res.data;
					that.list = res.data.pg_image;
					that.points = that.productInfo.pg_points
					// that.shopLogo = JSON.parse(res.data.store_details.logo);
				})
				
			},
			initDefaultAddress() {
				let self = this;
				getDefaultAddresses().then(res => {
					if (res.data) {
						self.addressInfo = res.data;
						self.addressId = res.data.id;
					}
				})
			},
			initAddress() {
				let self = this;
				getAddressesList().then(res => {
					self.addressList = res.data;
				})
			},
			// 登录
			goLogin(){
				// #ifdef APP-PLUS || H5
				uni.navigateTo({
					url:'/pages/login/login'
				})
				// #endif
			},
			onShowAddress() {
				this.$refs.address.open();
			},
			onNewAddress() {
				// this.$utils.jump('/other/add-address/add-address?type=0');
				uni.navigateTo({
					url: '/other/add-address/add-address?type=0'
				})
			},
			onSelected(item) {
				this.addressInfo = item;
				this.addressId = item.id;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pd20{
		padding: 0 20upx;
	}
	.content{
		background-color: #f6f8f9;
	}
.productInfo{
	background-color: #fff;
	.productTitle{
		font-size: 34upx;
		padding: 30upx 0;
		font-weight: 500;
	}
	.pointPrice{
		color: #fe3333;
		padding-bottom: 30upx;
		.price{
			font-size: 40upx;
		}
	}
}
.shopInfo{
		margin: 20upx 0;
		display: flex;
		background-color: #fff;
		padding: 20upx;
		.shopImg{
			width: 80upx;
			height: 80upx;
			border-radius: 6upx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.shopName{
			flex: 1;
			margin-left: 10upx;
		}
		.shopNum{
			font-size: 22upx;
			color: #999;
			margin-top: 10upx;
		}
		.icon{
			float: right;
		}
	}
	.details{
		background-color: #fff;
		margin-top: 20upx;
	}
	.descTitle{
		color: #333;
		font-size: 32upx;
		text-align: center;
		font-weight: 600;
		
		padding: 20upx 0;
	}
	
	.btns{
		width: 100vw;
		position: fixed;
		bottom: 0;
		z-index: 9;
		padding: 10upx 30upx;
		background-color: #fff;
		color: #fff;
	}
	$seckillcolor:#fe3333;
	.seckillInfo{
		padding: 20upx;
		display: flex;
		justify-content: space-between;
		font-size: 24upx;
		.seckillPrice{
			color: $seckillcolor;
			
		}
		.price{
			font-size: 34upx;
			font-weight: 600;
		}
		.oldPrice{
			color: #999;
			margin-left: 10upx;
			text-decoration: line-through;
		}
		.dowmTitle{
			color: #01a90c;
			
		}
		.count-down-demo{
			justify-content: center;
			text-align: center;
			color: #fff;
			// border: #01a90c 1upx solid;
			background-color: #fc562f;
			border-radius: 5rpx;
		}
	}
	
	
	.addressView {
		display: flex;
		flex-direction: column;
		// margin: 30rpx 0rpx;
		background: #FFFFFF;
		padding: 30rpx;
	}
	
	.addressData {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}
	
	.addressIcon {
		width: 30rpx;
		height: 36rpx;
	}
	
	.address {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #333333;
	}
	
	.addressText {
		font-size: 28rpx;
		margin-top: 10rpx;
		color: #666;
	}
	
	.nextIcon {
		width: 15rpx;
	}
	
	.addressAdd {
		color: #F6632D;
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 30rpx;
	}
	
	.productbuy{
		display: flex;
		padding: 30upx 30upx 0;
		.buyImg{
			width: 200upx;
			height: 200upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.buypoint{
			color: #fe3333;
		}
	}
	.number-box{
		display: flex;
		justify-content: flex-end;
		padding: 30upx 30upx;
	}
	.btnbox{
		padding: 30upx;
	}
	.buyinfo{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
</style>